<template>
    <div class="chartPage">
        <div class="title">人员当天体温统计</div>
        <div class="filter">
            <div>
                <div class="pickBox">
                    <span class="demonstration">选择日期</span>
                    <el-date-picker
                            v-model="value"
                            type="date"
                            placeholder="选择日期"
                            @change="onChangeDate">
                    </el-date-picker>
                </div>
            </div>
        </div>
        <div class="main" ref="column_mul"></div>
    </div>
</template>

<script>
    import {DatePicker} from 'element-ui'

    export default {
        name: "chartColumn",

        components: {
            'elDatePicker': DatePicker
        },

        props: ['chartsData'],

        data() {
            return {
                option: {
                    title: {
                        // text: '人员当天体温统计',
                        // subtext: '每天上午、下午体温统计展示'
                    },
                    color: ['#4cabce', '#006699', '#003366', '#e5323e'],
                    tooltip: {
                        trigger: 'axis',
                        axisPointer: {
                            type: 'shadow'
                        }
                    },
                    xAxis: {
                        name: '温度℃',
                        type: 'category',
                        data: [],
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff',
                            }
                        },
                        axisLabel: {
                            textStyle: {
                                color: '#ffffff',
                            }
                        },
                    },
                    yAxis: {
                        name: '人数',
                        min: 0,
                        max: 60,
                        type: 'value',
                        axisLine: {
                            lineStyle: {
                                color: '#ffffff',
                            }
                        },
                        axisLabel: {
                            formatter: '{value} 个',
                            textStyle: {
                                color: '#ffffff'
                            }
                        },

                    },
                    dataZoom: [  {  type: 'inside' } ],
                    series: [
                        {
                            name: '上午',
                            data: [100, 200, 150, 80, 70, 110, 130, 100, 200, 150, 80, 70, 110, 130],
                            type: 'bar'
                        },
                        {
                            name: '下午',
                            data: [50, 100, 120, 150, 170, 10, 130, 100, 200, 150, 80, 70, 110, 130],
                            type: 'bar'
                        }
                    ]
                },

                value: '2020-02-11',

                xMin: 35,
                xMax: 39,

                time_lm: 1581350400000,     // 2020-02-11 00:00:00
                time_am: 1581393600000,     // 2020-02-11 12:00:00
                time_pm: 1581436799000,     // 2020-02-11 23:59:59

            }
        },

        created() { },

        mounted() {
            const _this = this;
            _this.init();
        },

        methods: {
            init() {
                const _this = this;
                // console.log('chartColumn', _this.chartsData)
                _this.setXAxis();
                _this.setChartData(function () {
                    _this.setChartShow();
                });

            },

            setChartData(fn) {
                const _this = this;
                let chartsData = _this.chartsData;
                // console.log('chartColumn', _this.chartsData)
                let arr_am= [];
                let arr_pm= [];
                for (let i=0; i<chartsData.length; i++) {
                    let _time = _this.changeTime(  chartsData[i].record_time );
                    if ( _time < _this.time_am && _time > _this.time_lm ) {
                        // 这是是当天上午
                        arr_am.push( chartsData[i] );
                    }
                    else if ( _time < _this.time_pm && _time > _this.time_am  ) {
                        // 这是是当天下午
                        arr_pm.push( chartsData[i] );
                    }
                }

                // console.log('arr_am', arr_am)
                // console.log('arr_pm', arr_pm)

                _this.setChartColumn(arr_am, 0);
                _this.setChartColumn(arr_pm, 1);
                if (fn)fn();
            },

            setChartColumn(array, index) {
                const _this = this;
                let idx = index ? index : 0;
                let arr = array;
                let _xAxis = _this.option.xAxis.data;
                let _series = _this.option.series[idx].data;

                for (let i=0; i<_xAxis.length; i++) {
                    _series[i] = 0;
                     for (let j=0; j<arr.length; j++) {
                         if (_xAxis[i] * 1 == arr[j].temperature * 1) {
                             _series[i]++;
                         }
                     }
                }


            },

            // 表格设置
            setChartShow() {
                const _this = this;
                let option = _this.option;
                // 基于准备好的dom，初始化echarts实例
                let  myChart = _this.$echarts.init( _this.oColumnMul);
                // console.log(myChart)

                // Enable data zoom when user click bar.
                myChart.setOption( option );
                window.addEventListener('resize', function () {
                    myChart.resize();
                });

            },

            // X轴设置
            setXAxis() {
                const _this = this;
                let xAxisData = [];
                let _xmin = _this.xMin * 10;
                let _xmax = _this.xMax * 10;
                for (let i = _xmin; i<=_xmax; i++) {
                    xAxisData.push( (i/10).toFixed(1) );
                }

                _this.option.xAxis.data = xAxisData;
            },


            changeTime(timer) {
                return (new Date( timer )).getTime() * 1;
            },

            onChangeDate() {

                let _val = new Date( this.value );
                let day = `${ _val.getFullYear() }-${ _val.getMonth()+1 }-${ _val.getDate() }`;

                this.time_lm = _val.getTime();
                this.time_am = this.changeTime( day + ' 12:00:00' );
                this.time_pm = this.changeTime( day + ' 23:59:59' );

                // console.log( this.time_lm )
                // console.log( this.time_am )

            }
        },

        computed: {
            oColumnMul() {
                return this.$refs.column_mul;
            }
        },
    }
</script>

<!--<style scoped lang="scss">-->
<!--    @import "chartColumn";-->
<!--</style>-->

<style scoped lang="css">
    .pickBox >>> .el-input__inner {
        background: transparent;
        color: #ffffff;
    }
</style>